<template>
	<view class="listLeft">
		<view class="author">
			{{leftText.author}}
			
		</view>
		<view class="title">
			{{leftText.title}}
		</view>
		<view class="musicBox">
			<view class="music">
				My Loves
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:["leftText"],
		data(){
			return{
			}
		},
	}
</script>

<style>
	.listLeft{
		height: 150px;
		margin-left: 10px;
		width: 150px;
	}
	.author{
		height: 35px;
		font-size: 18px;
		line-height: 35px;
	}
	
	.title{
		font-size: 15px;
		line-height: 22px;
		width: 100%;
	}
	.musicBox{
		width: 100px;
		overflow: hidden;
	}
	.music{
		font-size: 15px;
		line-height: 35px;
		width: 140px;
		animation: music 4s linear 0.2s infinite;
	}
	@keyframes music{
		0%{
			transform: translate3d(80%,0,0);
		}
		100%{
			transform: translate3d(-80%,0,0);
		}
	}
</style>
